import { Avatar, Button, Divider, Dropdown, Menu, Modal, Table } from 'antd';
import React, { Fragment, useRef, useState } from 'react';
import styles from './index.module.less';
import { PlusOutlined, UserOutlined, DownOutlined } from '@ant-design/icons';
import CreateData from './CreateData';

const dataSource = [];
for (let i = 0; i < 10; i++) {
    dataSource.push({
        id: i,
        dataName: `test${i}`,
        type: 'GeoJSON',
        // geometry: {
        //     type: 'Polygon',
        //     coordinates: [
        //         [
        //             [116.2756188794575, 39.85052030206029],
        //             [116.46555543433846, 39.85052030206029],
        //             [116.46555543433846, 39.977754285041044],
        //             [116.2756188794575, 39.977754285041044],
        //             [116.2756188794575, 39.85052030206029],
        //         ],
        //     ],
        // },
    });
}
export default function Home(props) {
    const [createVisible, setCreateVisible] = useState(false);

    const columns = [
        { align: 'center', title: 'id', dataIndex: 'id' },
        { align: 'center', title: '名称', dataIndex: 'dataName' },
        { align: 'center', title: '类型', dataIndex: 'type' },
        {
            align: 'center',
            title: '操作',
            render() {
                return (
                    <Fragment>
                        <Button type="primary" size="small" onClick={() => props.history.push('/preview')}>
                            预览
                        </Button>
                        <Divider type="vertical" />
                        <Button type="primary" size="small" danger>
                            删除
                        </Button>
                    </Fragment>
                );
            },
        },
    ];

    const menu = (
        <Menu>
            <Menu.Item danger key="0">
                <abbr>退出登陆</abbr>
            </Menu.Item>
        </Menu>
    );
    return (
        <div className={styles.content}>
            <CreateData visible={createVisible} setVisible={setCreateVisible} />
            <div>
                <header className={styles.header}>
                    <h1>地图对比系统</h1>
                    <div className={styles.headImg}>
                        <div className={styles.userInfo}>
                            <Avatar size="small" icon={<UserOutlined />} />
                            <div className={styles.textHea}>用户名：admin</div>
                        </div>
                        <div>
                            <Dropdown overlay={menu}>
                                <a className="ant-dropdown-link" onClick={(e) => e.preventDefault()}>
                                    更多操作
                                    <DownOutlined />
                                </a>
                            </Dropdown>
                        </div>
                    </div>
                </header>
            </div>
            <div className={styles.tableSty}>
                <Button
                    style={{ marginBottom: 10, width: 100 }}
                    shape="round"
                    type="primary"
                    onClick={() => setCreateVisible(true)}
                >
                    添加数据
                </Button>
                <Table columns={columns} dataSource={dataSource} rowKey="id" />
            </div>
        </div>
    );
}
